<template>
  <div class="card">
    <div class="blob"></div>

    <img v-if="props.img" :src="props.img" class="img" />
    <img v-else src="@/assets/img/default/noPortrait.svg" class="img" />
    <h2>{{ props.topName }}</h2>
    <h3>{{ props.secondName }}</h3>
    <p class="socialPlatform">
      <i class="iconfont icon-qq"></i>
      <i class="iconfont icon-weixin"></i><i class="iconfont icon-xinlangweibo"></i>
      <i class="iconfont icon-douyin"></i>
    </p>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  img?: string | null
  topName: string
  secondName: string
}

const props = withDefaults(defineProps<IProps>(), {})
</script>

<style lang="less" scoped>
// 用户信息卡片start
.card {
  // width: 190px;
  position: relative;
  width: 100%;
  height: 254px;
  margin: 0 auto;
  // background: #f0f0f0;
  border-radius: 10px;
  text-align: center;
  transition: all 0.5s;
  // 水滴有下边距 图片有上边距 消除外边距合并、
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.card:hover {
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.623);
  // background-color: #4bb8ff;
  background-color: #e7ebf2;
  border-bottom: 0;
}

/* 卡片顶部水滴 */
.card .blob {
  height: 10px;
  width: 75%;
  border-radius: 0 0 30px 30px;
  margin: 0 auto;
  // background-color: #4bb8ff;
  background-color: #e7ebf2;
  // 元素可见
  visibility: visible;
  transition: all 0.3s;
}

// 鼠标放上卡片，里面的顶部水滴高度设为0
.card:hover .blob {
  height: 0;
}

/* 图片头像区 */
.card .img {
  cursor: pointer;
  display: flex;
  margin: 30px auto 10px auto;
  width: 70px;
  height: 70px;
  // background-color: #4bb8ff;
  border-radius: 50%;
  font-size: 10px;
  // background-image: url("@/assets/portrait.jpg");
  // background-size: 100% 100%;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.card:hover .img {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  margin: 6% auto 0;
  // background-color: #f0f0f0;
  z-index: 99999;
}

/* 用户名 */
.card h2 {
  padding: 15px 10px;
  font-size: 24px;
  transition: all 0.1s;
  z-index: -99;
  line-height: 16px;
}

.card h3 {
  font-size: 18px;
  color: #666;
}

.card:hover h2 {
  // 透明度为0 也即隐藏
  display: none;
  width: 100%;
  position: absolute;
  transition: all 0.5s;
}

.card:hover h3 {
  display: none;
  transition: all 0.5s;
}

// .card .socialPlatform {
//   position: absolute;
//   bottom: 2px;
// }

/* 社交平台图标 */
.card .socialPlatform i {
  cursor: pointer;
  opacity: 1;
  display: inline-block;
  margin: 20px 8px 0;
  transition: all 0.75s;
}

.card:hover .socialPlatform {
  position: absolute;
  width: 100%;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0);

  opacity: 1;
  color: #666;
}

.card:hover .socialPlatform i {
  font-size: 24px;
  margin: 0 14px 6px;
  transition: all 0.5s;
}
// 用户信息卡片end
</style>
